<template>
	<div>
		<div v-for="(work, idx) in config.workflowList" :style="{
			backgroundColor:
				idx <= config.currentStepNum
					? config.globalOption.activeColor
					: config.globalOption.noActiveColor,
		}" class="test">
			{{ work.label }}
		</div>
	</div>
	<component :is="renderComponent"></component>

	<el-button style="width: 200px; margin: 0px !important" @click="emits('prev')">
		上一步
	</el-button>
	<el-button style="width: 200px; margin: 0px !important" @click="emits('next')">
		下一步
	</el-button>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { WorkComponent, Workflow, WorkflowOption } from ".";

type Props = {
	configture: {
		currentStepNum: number;
		globalOption: WorkflowOption;
		workflowList: Workflow<Record<string, WorkComponent>, string>[];
	};
};

const props = withDefaults(defineProps<Props>(), {});
const emits = defineEmits(["next", "prev"]);

const config = ref(props.configture);

const renderComponent = computed(() => {
	return config.value.workflowList[config.value.currentStepNum].option.getVNode();
});

const setProps = async (prop: Partial<Props["configture"]>) => {
	config.value = { ...config.value, ...prop };
};


defineExpose({ setProps });
</script>

<style lang="scss" scoped>
.test {
	width: 60px;
	height: 60px;
	margin: 10px;
	font-size: 14px;
	color: rgb(226, 217, 217);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.3s linear;
}

.tans-enter-active,
.tans-leave-active {
	transition: opacity 1.5s ease;
}

.tans-enter-from,
.tans-leave-to {
	opacity: 0;
}
</style>
